<style>
p.first-letter:first-letter { color: red; }
</style>
<div id="container">
<p id="description"></p>
<p id="sample" class="first-letter"><span>0123456</span></p>
</div>
<div id="console"></div>
<script src="../../../../resources/js-test.js"></script>
<script>
description('caretRangeFromPoint() should work with :first-letter style');
function $(id) { return document.getElementById(id); }

var middle = $('sample').offsetTop + $('sample').offsetHeight / 2;
var left = $('sample').offsetLeft;
var numberOfChars = $('sample').firstChild.firstChild.length;
var charWidth = $('sample').firstChild.offsetWidth / numberOfChars;
var x = left;
for (var i = 0; i < numberOfChars; ++i) {
    var range = document.caretRangeFromPoint(x + 3, middle);
    shouldBe('range.startOffset', i.toString());
    x += charWidth;
}

if (window.testRunner)
    $('container').outerHTML = '';
</script>
